<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>		<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>		<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" m anifest="site.appcache"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>IDB Feed Reader</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		
		<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">
		<meta name="msapplication-task" content="IDB Feed Reader">
		<meta property="og:image" content="images/screenshot_small.png"/>
		<meta property="og:title" content="IDB Feed Reader (for IE10 Test Drive)"/>
		<meta name="description" content="This is an example using HTML5 Indexed Database API. All feeds are stored in local database, so very fast.">

		<link rel="stylesheet" href="css/contents.css" type="text/css" />
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/ReturnAndShareControls.css">
		<script src="lib/js/modernizr-2.0.6.min.js"></script>	
	</head>
	<body>
		<div id="wrapper" class="clearfix">
			<article id="feedContentViewer">
				<img src="images/icon_close.png" id="closeFeedContentViewerButton" style="float:right;">
				<h3><a href="javascript:void(0);" target="_blank"></a></h3>
				<p class="resource"></p>
				<time class="date" style="font-size:12px; color:#dcdcdc;" pubdate></time>
				<hr style="width:100%;color:#FFFFFF;">
				<div class="content"></div>
			</article>

			<div id="leftCol">
				<h1 class="logo"><img src="images/logo.png"></h1>
				<div id="feedControl">
					<section>
						<h1>▼<span id="msg_regist"></span></h1>
						<form id="addFeedForm" onsubmit="return false;">
							<p id="msg_registExplain" style="font-size:12px; line-height:14px;"></p>
							<input id="newFeedUrl" type="url" style="width:180px;" required>
							<button id="msg_add"></button>
						</form>
					</section>
					<nav>
						<ul>
							<li>▼<a id="msg_allItems" href="javascript:void(0);"></a></li>
							<li>▼<a id="msg_starItems" href="javascript:void(0);"></a></li>
							<li>▼<a id="msg_unreadItems" href="javascript:void(0);"></a></li>
							<li>▼<span id="msg_feeds" class="title"></span></li>
							<ul id="feedList"></ul>
						</ul>
					</nav>
				</div>
			</div>
			<!-- main -->
			<div id="mainCol" style="position: relative">
				<div id="syncDetail">
					<p class="floatL">Fetching <span id="feedTotal"></span> feeds...</p> 
					<img src="images/icon_close.png" onclick="$('#syncDetail').hide()" style="margin-left:4px;">
					<progress id="syncProgress" max=100 value=0></progress>
					<p>Processing. Please Wait...</p>
				</div>
				<div class="statusIcons">
					<img id="statusIcon_online" src="images/icon_online.png" class="statusIcon">
					<img id="statusIcon_syncing" src="images/icon_syncing.png" class="statusIcon">
					<img id="statusIcon_offline" src="images/icon_offline.png" class="statusIcon">
				</div>
				<section id="feedEntriesSection">
					<header>
						<h1></h1>
					</header>
					<div id="feedEntriesSectionContent">
						<table id="feedEntriesList">
						</table>
					</div>
					<!--
					<footer>
						<div id="pageControl" align="center">
							<span id="feedEntryPrev">
								<a id="prevPageCommand" href='javascript:void(0)'>
									<img src="images/btn_prev.png">
								</a>
							</span>
							<img src="images/line.png" style="margin:0 20px;">
							<span id="feedEntryNext">
								<a id="nextPageCommand" href='javascript:void(0)'>
									<img src="images/btn_next.png">
								</a>
							</span>
						</div>
					</footer>
					-->
				</section>
			</div>
            <div class="ft_img"><img src="images/footer.png"></div>

		</div><!-- wrapper -->
<!--
		<div align="center">
			<iframe id="IDBExplorer" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=offline-feed-reader93"
							style="width: 96%; height: 300px; overflow: scroll;"></iframe>
		</div>
-->
		<div id="veil"></div>
		<div id="aboutThisExample"></div>
		<section id="descriptionOfThisExample">
			<h1></h1>
			<img id="closeDescriptionButton" src="images/close_button.png">
			<div class="content">
			</div>
		</section>
		<div id="ReturnAndShareControls"></div>
		<script src="js/ReturnAndShareControls.js"></script>
		<script src="//www.google.com/jsapi"></script>
		<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
		<script>window.jQuery || document.write('<script src="lib/js/jquery-1.7.1.min.js"><\/script>')</script>
		<script src="lib/js/jquery.i18n.properties-min-1.0.9.js"></script>
		<script src="lib/js/modernizr-2.0.6.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/index.html.js" charset="UTF-8"></script>
		<script>
			var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
			g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g,s)}(document,'script'));
		</script>
	</body>
</html>
